// 商管的 收缴状况的 收缴率
<template>
  <div class="home-chart-box">
    <el-table :border="false" :data="tableData" max-height="300" stripe>
      <el-table-column align="center" label="项目名称" prop="xiangmumingcheng"></el-table-column>
      <el-table-column align="center" label="实收总金额" prop="qianfei"></el-table-column>
      <el-table-column align="center" label="应收金金额" prop="baozhengjin"></el-table-column>
      <el-table-column align="center" label="收缴比例">
        <template slot-scope="scope">
          <el-progress type="line" :percentage="scope.row.bili" :color="scope.row.yanse"></el-progress>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import { apiViewOperateCapture } from '@a/index';

  export default {
    name: 'capture',
    data() {
      return {
        tableData: [
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府',yanse:"" },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili:35, qianfeishichang: 12, xiangmumingcheng: '万国府',yanse:"" },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 75, qianfeishichang: 12, xiangmumingcheng: '万国府',yanse:"" },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府',yanse:"" },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府',yanse:"" },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府',yanse:"" },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府',yanse:"" },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府',yanse:"" },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府',yanse:"" },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府',yanse:"" },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府',yanse:"" },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府',yanse:"" },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府',yanse:"" },
        ],
      };
    },

    mounted(){
        console.log(99)
        this.getSource()
    },

    methods: {
      async getSource() {
        // let res = await apiViewOperateCapture()
        // this.tableData = res.rows || []
        this.tableData.forEach(item=>{
            if (item.bili > 0 && item.bili < 33) {
                item.yanse = "#3384FE"
            } else if (item.bili >= 33 && item.bili < 66) {
                item.yanse = "#F79100"
            } else {
                item.yanse = "#FF0000"
            }
        })
      },
    },
  };
</script>

<style lang="scss" scoped></style>
